import Base from "../Base.js";
import schedulesApi from "../../api/schedules.js";
import seatsApi from "../../api/seats.js";
import kexuanImg from "../../img/kexuan.jpg";
import yixuanImg from "../../img/yixuan.jpg";
import ordersApi from "../../api/orders.js";
export default class extends Base {
    constructor(props) {
        super(props);
        this.userId = "605d91343cc4117a0c36f21f";
        this._id = props._id;
    }
    handle() {
        $("table").on("click", "img", e => {
            const row = $(e.target).attr("row");
            const col = $(e.target).attr("col");
            if (e.target.dataset.state == "true") {
                e.target.dataset.state = false;
                $(e.target).attr("src", yixuanImg);
                this.seat.seatsArr[row][col] = 2;
            }
            else if (e.target.className != "sold") {
                e.target.dataset.state = true;
                $(e.target).attr("src", kexuanImg);
                this.seat.seatsArr[row][col] = 1;
            }
        })
        $("#shop").on("click", async e => {
            const soldArr = [];
            this.seat.seatsArr.map((row, indexs) => {
                row.map((col, index) => {
                    if (col == 2) {
                        soldArr.push([indexs, index]);
                    }
                })
            })
            if (!soldArr.length) {
                layui.layer.msg("请选择一个座位");
                return false;
            }
            this.seat.seatsArr = JSON.stringify(this.seat.seatsArr);
            await seatsApi.update(this.seat);
            this.seat.seatsArr = JSON.parse(this.seat.seatsArr);

            const order = {
                usersId: this.userId,
                schedulesId: this._id,
                seats: JSON.stringify(soldArr),
            };
            await this.getSeat();
            await ordersApi.add(order);
            layui.layer.msg("购票成功");
        })
    }
    createSeatsArr(row, col) {
        this.seat.seatsArr = [];
        for (let i = 1; i <= row; i++) {
            let arr = [];
            for (let i = 1; i <= col; i++) {
                arr.push(1);
            }
            this.seat.seatsArr.push(arr);
        }
    }
    render() {
        this.el.html(`
            <h1 style="color:skyblue;" class="tname"></h1>
            <article style="display:flex;">
                <table>
                    <tbody class="seats">
                    </tbody>
                </table>
            </article>
            <button class="layui-btn layui-btn-normal" id="shop">购票</button>
        `);
        this.tnameEle = $(".tname");
        this.seatsEle = $(".seats");
    }
    reRender() {
        let str = '';
        str += '<table><tbody class="seat">';
        this.seat.seatsArr.map((items, indexs) => {
            str += `<tr class="row">`;
            items.map((item, index) => {
                str += `<td class="col">`;
                if (item == 1) {
                    str += `<img src="${kexuanImg}"/ row=${indexs} col=${index} data-state="true">`;
                }
                else if (item != 0) {
                    str += `<img src="${yixuanImg}"/ row=${indexs} col=${index} data-state="false" class="sold">`;
                }
                str += `</td>`;
            })
            str += `</tr>`;
        });
        str += '</tbody></table>';
        this.seatsEle.html(str);
        $(".col").css({
            width: 52 + "px",
            height: 52 + "px",
        })
    }

    async mounted() {
        await this.getSchedule();
        await this.getSeat();
    }
    async getSchedule() {
        this.schedule = await schedulesApi.getOne(this._id);
        this.theater = this.schedule.theaterId;
        this.tnameEle.html(this.theater.name);
    }
    async getSeat() {
        this.seat = await seatsApi.getOne(this.theater._id);
        if (this.seat.seatsArr.length) {
            this.seat.seatsArr = this.seat.seatsArr.map(row => row.map(col => col == 2 ? col = 3 : col));
        } else {
            this.createSeatsArr(9, 9);
        }
        this.reRender();
    }
}
